<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
	<meta charset="utf-8" />
	<title>基本信息</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta content="" name="description" />
	<meta content="" name="author" />
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN THEME STYLES -->
	<link href="../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
	<link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
	<link href="../assets/admin/layout3/css/customadmin.css" rel="stylesheet" type="text/css">
	<link href="../assets/elementui/element.css" rel="stylesheet" type="text/css">
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="img/logo.png" />
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->

<body>
	<div id="app">
		<!-- BEGIN HEADER -->
		<div class="page-header" v-cloak>
			<!-- BEGIN HEADER TOP -->
			<div class="page-header-top">
				<div class="container">
					<!-- BEGIN LOGO -->
					<div class="page-logo">
						<a href="adminhome.html"><img src="img/logo1.png" alt="logo" class="logo-default"></a>
					</div>
					<!-- END LOGO -->
					<!-- BEGIN RESPONSIVE MENU TOGGLER -->
					<a href="" class="menu-toggler"></a>
					<!-- END RESPONSIVE MENU TOGGLER -->
					<!-- BEGIN TOP NAVIGATION MENU -->
					<div class="top-menu">
					</div>
					<!-- END TOP NAVIGATION MENU -->
				</div>
			</div>
			<!-- END HEADER TOP -->
			<!-- BEGIN HEADER MENU -->
			<div class="page-header-menu">
				<div class="container">
					<!-- BEGIN MEGA MENU -->
					<div class="hor-menu ">
						<ul class="nav navbar-nav">
							<li class="active">
								<a @click="changeTab($event,'info')" href="adminhome.html">基本信息</a>
							</li>
							<li>
								<a @click="changeTab($event,'link')" href="adminlines.html">链路信息</a>
							</li>
							<li>
								<a @click="changeTab($event,'station')" href="adminbdz.html">变电站信息</a>
							</li>
							<!-- <li>
								<a @click="changeTab($event,'box')" href="adminjth.html">接头盒信息</a>
							</li>
							<li>
								<a @click="changeTab($event,'field')" href="adminfield.html">字段管理</a>
							</li> -->
							<li>
								<a @click="changeTab($event,'admin')" href="import.html">导入导出</a>
							</li>
						</ul>
					</div>
					<!-- END MEGA MENU -->
				</div>
			</div>
			<!-- END HEADER MENU -->
		</div>
		<!-- END HEADER -->
		<!-- BEGIN PAGE CONTAINER -->
		<div class="page-container">

			<!-- BEGIN PAGE CONTENT -->
			<div class="page-content" v-show="tab == 'info'">
				<div class="container">

					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12 ">
							<!-- BEGIN SAMPLE FORM PORTLET-->
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption font-green">
										<i class="icon-settings font-green"></i>
										<span class="caption-subject bold uppercase"> 包头供电公司</span>
									</div>
								</div>
								<div class="portlet-body form">
									<form role="form">
										<div class="form-body">
											<div class="form-group form-md-line-input">
												<input type="text" class="form-control" id="form_control_1"
													v-model="info.company">
												<label for="form_control_1">公司名称</label>
											</div>
											<div class="form-group form-md-line-input">
												<textarea class="form-control" rows="7" cols="" placeholder="请输入 "
													v-model="info.descript"></textarea>
												<label for="form_control_1">公司简介</label>
											</div>

											<div class="form-group form-md-line-input">
												<input type="text" class="form-control" id="form_control_1"
													v-model="info.len">
												<label for="form_control_1">光缆总长（公里）</label>
											</div>
											<div class="form-group form-md-line-input">
												<input type="text" class="form-control" id="form_control_1"
													v-model="info.watchLen">
												<label for="form_control_1">已监控光缆总长（公里）</label>
											</div>
											<div class="form-group form-md-line-input">
												<input type="text" class="form-control" id="form_control_1"
													v-model="info.locatorLen">
												<label for="form_control_1">已配备定位器总长（公里）</label>
											</div>
											<div class="form-actions noborder margin-top--20">
												<button type="button" class="btn blue" @click="saveInfo">确定修改</button>
											</div>
										</div>
									</form>
								</div>
							</div>
							<!-- END SAMPLE FORM PORTLET-->

						</div>

						<!-- END PAGE CONTENT INNER -->
					</div>
				</div>
				<!-- END PAGE CONTENT -->
			</div>
			<!-- END PAGE CONTAINER -->
			<div class="page-content" v-show="tab == 'link'">
				<div class="container">

					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12 ">
							<!-- BEGIN SAMPLE FORM PORTLET-->
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption font-green-sharp">
										<i class="icon-settings font-green-sharp"></i>
										<span class="caption-subject bold uppercase"> 链路信息修改</span>
									</div>

								</div>
								<div class="portlet-body form">
									<div class="panel-group accordion" id="accordion1">
										<div class="panel panel-default" v-for="(el,idx) in links">
											<div class="panel-heading">
												<h4 class="panel-title">
													<a class="accordion-toggle" data-toggle="collapse"
														data-parent="#accordion1" @click="changeLink(idx)">
														{{el.linkName}}
													</a>
												</h4>
											</div>
											<div v-bind:id="'collapse_' + idx" class="panel-collapse  collapse"
												:class="{'in':select_link == idx}">
												<div class="panel-body">
													<form role="form">
														<div class="form-body">
															<div class="col-md-6">
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="link.linkName">
																	<label for="form_control_1">线路名称</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="link.lineName">
																	<label for="form_control_1">链路名称：</label>
																</div>

																<div class="form-group form-md-line-input">
																	<select class="form-control" id="form_control_1"
																		v-model="link.status">
																		<option value="正常">正常</option>
																		<option value="衰减">衰减</option>
																		<option value="中断">中断</option>
																	</select>
																	<label for="form_control_1">运行状态：</label>
																</div>

																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="link.attenuations">
																	<label for="form_control_1">衰减值：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="link.times">
																	<label for="form_control_1">建设年代：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="link.cancat">
																	<label for="form_control_1">维护人信息：</label>
																</div>
																<div class="form-actions noborder margin-top--20">
																	<button type="button" class="btn blue"
																		@click="saveLink(idx,el)">确定修改</button>
																</div>
															</div>
															<div class="col-md-6">
																<div class="form-group form-md-line-input">
																	<div class="form-group form-md-line-input">
																		<select class="form-control" id="form_control_2"
																			v-model="link.statusType">
																			<option value="精准">精准</option>
																			<option value="通断">通断</option>
																		</select>
																		<label for="form_control_1">状态</label>
																	</div>
																	<div class="input-group input-group-sm">

																		<div class="input-group-control">
																			<input type="text" class="form-control"
																				placeholder="请输入" v-model="work">
																			<label for="form_control_1">新增业务名称</label>
																		</div>
																		<span class="input-group-btn btn-right">
																			<button class="btn green-haze" type="button"
																				@click="createWork(idx,el.works)">添加</button>
																		</span>
																	</div>
																	<br>
																	<div class="table-scrollable">
																		<table class="table table-hover">
																			<thead>
																				<tr>
																					<th>
																						业务名称
																					</th>
																					<th>
																						操作
																					</th>
																				</tr>
																			</thead>
																			<tbody>
																				<tr v-for="(work,wid) in el.works">
																					<td v-text="work"></td>
																					<td>
																						<span
																							class="label label-sm label-danger"
																							@click="eraseWork(wid)">
																							删除 </span>
																					</td>
																				</tr>
																			</tbody>
																		</table>
																	</div>
																</div>
															</div>

														</div>

													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- END SAMPLE FORM PORTLET-->
						</div>
					</div>
					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>

			<div class="page-content" v-show="tab == 'station'">
				<div class="container">

					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12 ">
							<!-- BEGIN SAMPLE FORM PORTLET-->
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption font-green-sharp">
										<i class="icon-settings font-green-sharp"></i>
										<span class="caption-subject bold uppercase">变电站信息</span>
									</div>
									<div class="actions">
										<div class="btn-group">
											<a class="btn btn-sm green" href="javascript:;"
												@click="incrementStation($event)">新增变电站</a>
										</div>
									</div>

								</div>
								<div class="portlet-body form">
									<div class="panel-group accordion" id="accordion1">
										<div class="panel panel-default" v-for="(station,sid) in stations">
											<div class="panel-heading">
												<h4 class="panel-title">
													<a class="accordion-toggle" data-toggle="collapse"
														data-parent="#accordion1" href="#collapse_1"
														v-text="station.stationName">
													</a>
												</h4>
											</div>
											<div id="collapse_1" class="panel-collapse">
												<div class="panel-body">
													<form role="form">
														<div class="form-body">
															<div class="col-md-6">
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.stationName">
																	<label for="form_control_1">变电站名称</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.voltage">
																	<label for="form_control_1">电压：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.R">
																	<label for="form_control_1">R：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.G">
																	<label for="form_control_1">G：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.B">
																	<label for="form_control_1">B：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.longitude">
																	<label for="form_control_1">经度：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.latitude">
																	<label for="form_control_1">纬度：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<input type="text" class="form-control"
																		id="form_control_1" placeholder="请输入"
																		v-model="station.Z">
																	<label for="form_control_1">Z坐标：</label>
																</div>
																<div class="form-group form-md-line-input">
																	<div class="input-group">
																		<div class="input-group-control">
																			<input type="text" class="form-control"
																				placeholder="请输入"
																				v-model="station.linkInput">
																			<label for="form_control_1">涉及线路</label>
																		</div>
																		<span class="input-group-btn btn-right">
																			<button type="button" class="btn green-haze"
																				@click="insertLink(sid)">
																				添加
																			</button>
																		</span>
																	</div>
																	<br>
																	<div class="table-scrollable">
																		<table class="table table-hover">
																			<thead>
																				<tr>
																					<th>
																						线路名称
																					</th>
																					<th>
																						操作
																					</th>
																				</tr>
																			</thead>
																			<tbody>
																				<tr v-for="(link,lid) in station.links">
																					<td v-text="link"></td>
																					<td>
																						<span
																							class="label label-sm label-danger"
																							@click="eraseLinks(sid,lid)">删除</span>
																					</td>
																				</tr>
																				<!-- <tr>
																					<td>
																						110kv古园I回
																					</td>
																					<td>
																						<span
																							class="label label-sm label-danger">
																							删除 </span>
																					</td>
																				</tr> -->
																			</tbody>
																		</table>
																	</div>
																</div>

																<div class="form-group form-md-line-input">
																	<div class="input-group">
																		<div class="input-group-control">
																			<input type="text" class="form-control"
																				placeholder="请输入"
																				v-model="station.workInput">
																			<label for="form_control_1">涉及业务</label>
																		</div>
																		<span class="input-group-btn btn-right">
																			<button type="button" class="btn green-haze"
																				@click="insertWork(sid)">添加
																			</button>
																		</span>
																	</div>
																	<br>
																	<div class="table-scrollable">
																		<table class="table table-hover">
																			<thead>
																				<tr>
																					<th>
																						业务名称
																					</th>
																					<th>
																						操作
																					</th>
																				</tr>
																			</thead>
																			<tbody>
																				<tr v-for="(work,wid) in station.works">
																					<td v-text="work"></td>
																					<td>
																						<span
																							class="label label-sm label-danger"
																							@click="eraseWorks(sid,wid)">删除</span>
																					</td>
																				</tr>
																			</tbody>
																		</table>
																	</div>
																</div>

																<div class="form-actions noborder margin-top--20">
																	<button type="button" class="btn blue"
																		@click="saveStation(sid,station)">确定修改</button>
																</div>
															</div>
															<div class="col-md-6">



															</div>

														</div>

													</form>

												</div>
											</div>
										</div>
									</div>

								</div>
							</div>
							<!-- END SAMPLE FORM PORTLET-->
						</div>
					</div>
					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>

			<div class="page-content" v-show="tab == 'box'">
				<div class="container">

					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12 ">
							<!-- BEGIN SAMPLE FORM PORTLET-->
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption font-green-sharp">
										<i class="icon-settings font-green-sharp"></i>
										<span class="caption-subject bold uppercase"> 接头盒信息</span>
									</div>
									<div class="caption" style="margin-left:20%;">
										<label for="boxfix">
											<select name="" id="boxfix" style="width:200px;" v-model="boxLink">
												<option disabled value="">请选择线路......</option>
												<option v-for="(bl,bid) in links" :value="bl.linkId"
													v-text="bl.linkName"></option>
											</select>
										</label>

									</div>
								</div>
								<div class="portlet-body">
									<table class="table table-striped table-bordered table-hover">
										<thead>
											<tr>
												<th scope="col">
													节点编号
												</th>
												<th scope="col">
													接头盒编号
												</th>
												<th scope="col">
													接头盒名称
												</th>
												<th scope="col">
													接头盒编码
												</th>
												<th scope="col">
													运行时间
												</th>
												<th scope="col">
													经度
												</th>
												<th scope="col">
													纬度
												</th>
												<th scope="col">
													接入时间
												</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(box,bid) in boxes">
												<td v-text="bid + 1"></td>
												<td v-text="box.BoxID"></td>
												<td v-text="box.BoxName"></td>
												<td v-text="box.BoxCode"></td>
												<td v-text="box.Runtime"></td>
												<td v-text="box.Longitude"></td>
												<td v-text="box.Latitude"></td>
												<td v-text="box.cdate"></td>
											</tr>
										</tbody>
									</table>

								</div>
							</div>
							<!-- END SAMPLE FORM PORTLET-->
						</div>
					</div>
					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>
			<div class="page-content" v-show="tab =='field'">
				<div class="container">

					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12 ">
							<!-- BEGIN SAMPLE FORM PORTLET-->
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption font-green-sharp">
										<i class="icon-settings font-green-sharp"></i>
										<span class="caption-subject bold uppercase"> 字段管理</span>
									</div>


								</div>
								<div class="portlet-body form">
									<div class="panel-group accordion" id="accordion1">
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
													<a class="accordion-toggle" data-toggle="collapse"
														data-parent="#accordion1" href="#collapse_1">
														线路信息字段管理 </a>
												</h4>
											</div>
											<div id="collapse_1" class="panel-collapse in">
												<div class="panel-body">
													<form role="form">
														<div class="form-body">
															<div class="col-md-6">

																<div class="form-group form-md-line-input">
																	<div class="input-group">
																		<div class="input-group-control">
																			<input type="text" class="form-control"
																				placeholder="请输入">
																			<label for="form_control_1">添加字段</label>
																		</div>
																		<span class="input-group-btn btn-right">
																			<button type="button"
																				class="btn green-haze">
																				添加
																			</button>

																		</span>
																	</div>
																	<br>
																	<br>
																	<div class="table-scrollable">
																		<table class="table table-hover">
																			<thead>
																				<tr>
																					<th>
																						字段管理
																					</th>
																					<th class="text-center" colspan="3">
																						操作
																					</th>
																				</tr>
																			</thead>
																			<tbody>
																				<tr>
																					<td>
																						新增字段1
																					</td>
																					<td>
																						<button
																							class="btn btn-xs btn-success">
																							修改 </button>
																					</td>
																					<td>
																						<span
																							class="btn btn-xs btn-warning">
																							冻结 </span>
																					</td>
																					<td>
																						<span
																							class="btn btn-xs btn-danger">
																							删除 </span>
																					</td>
																				</tr>
																				<tr>
																					<td>
																						新增字段2
																					</td>
																					<td>
																						<button
																							class="btn btn-xs btn-success">
																							修改 </button>
																					</td>
																					<td>
																						<span
																							class="btn btn-xs btn-warning">
																							冻结 </span>
																					</td>
																					<td>
																						<span
																							class="btn btn-xs btn-danger">
																							删除 </span>
																					</td>
																				</tr>
																			</tbody>
																		</table>
																	</div>
																</div>



																<div class="form-actions noborder margin-top--20">
																	<button type="button" class="btn blue">确定修改</button>
																</div>
															</div>
															<div class="col-md-6">



															</div>

														</div>

													</form>

												</div>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
													<a class="accordion-toggle" data-toggle="collapse"
														data-parent="#accordion1" href="#collapse_2">
														预留（接头盒） </a>
												</h4>
											</div>
											<div id="collapse_2" class="panel-collapse collapse">
												<div class="panel-body">
													预留（接头盒）
												</div>
											</div>
										</div>

									</div>

								</div>
							</div>
							<!-- END SAMPLE FORM PORTLET-->
						</div>
					</div>
					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>
			<div class="page-content" v-show="tab == 'admin'">

				<div class="container" style="display: flex;">
					<div class="portlet-body" style="width:80%">
						<div class="row" style="margin:0;">
							<div class="col-md-6">
								<div class="form-group">
									<label class="control-label col-md-3"
										style="display: inline-block; margin-top: 5px;">线路名称</label>
									<div class="col-md-8">
										<input type="text" class="form-control" v-model="linkName" placeholder="请输入">
									</div>
									<div class="col-md-1">
										<button type="submit" class="btn btn-sm green" style="margin-top: 3px;"
											@click="createLink">添加</button>
									</div>

								</div>
							</div>
						</div>
						<div class="table-scrollable">
							<table class="table table-striped table-bordered table-hover table-im-ex">
								<thead>
									<tr>
										<th scope="col" style="text-align: center;">
											序号
										</th>
										<th scope="col" colspan="2">
											链路名称
										</th>
										<th scope="col">
											坐标信息
										</th>
										<th scope="col">
											链路信息
										</th>
										<th scope="col">
											接头盒信息
										</th>
										<th scope="col">
											变电站信息
										</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(el,lid) in links">
										<td v-text="lid + 1"></td>
										<td v-text="el.linkName"></td>
										<td>
											<a class="delete" href="javascript:;"
												@click="eraseLink($event,lid,el.linkId,el.linkName)">删除链路 </a>
										</td>
										<td class="td-space">
											<a class="import" @click="toImportCoordinate($event,lid,el)">导入 </a>
											<a class="export" @click="toExportCoordinate($event,lid,el)">导出 </a>
											<a class="delete" @click="toEraseCoordinate($event,lid,el)">删除 </a>
										</td>
										<td class="td-space">
											<a class="import" @click="toImportNodes($event,lid,el)">导入 </a>
											<a class="export" @click="toExportNodes($event,lid,el)">导出 </a>
											<a class="delete" @click="toEraseNodes($event,lid,el)">删除 </a>
										</td>
										<td class="td-space">
											<a class="import" @click="toImportboxes($event,lid,el)">导入 </a>
											<a class="export" @click="toExportBoxes($event,lid,el)">导出 </a>
											<a class="delete" @click="toEraseBoxes($event,lid,el)">删除 </a>
										</td>
										<td class="td-space">
											<a class="import" @click="toImportBDZ($event,lid,el)">导入 </a>
											<a class="export" @click="toExportBDZ($event,lid,el)">导出 </a>
											<a class="delete" @click="toEraseBDZ($event,lid,el)">删除 </a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="col-md-3 col-sm-3">
						<!-- BEGIN PORTLET-->
						<div class="portlet light" style="height: 400px;">
							<div class="portlet-title tabbable-line">
								<div class="caption caption-md">
									<i class="icon-globe theme-font hide"></i>
									<span class="caption-subject theme-font bold uppercase">链路列表</span>
								</div>
							</div>
							<div class="portlet-body">
								<ul class="feeds">
									<li v-for="(el,i) in links" @click="changeLink(i)">
										<a>
											<div class="desc" v-text="el.linkName"
												v-bind:class="{'link-active':i == idx}"></div>
										</a>
									</li>
								</ul>
							</div>
						</div>
						<!-- END PORTLET-->
					</div>
				</div>
			</div>
			<div class="upload-box" style="display:none;">
				<input type="file" name="coordinate" id="coordinate" @change="readCoordinate" />
				<input type="file" name="nodes" id="nodes" @change="readNodes" />
				<input type="file" name="boxes" id="boxes" @change="readBoxes" />
				<input type="file" name="bdz" id="bdz" @change="readBDZ" />
			</div>
			<!-- BEGIN FOOTER -->
			<div class="page-footer">
				<div class="container">
					2023 &copy; ---- <a href="" title="" target="_blank">---</a>
				</div>
			</div>
			<div class="scroll-to-top">
				<i class="icon-arrow-up"></i>
			</div>
		</div>
		<!-- END FOOTER -->
	</div>

	<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
	<script src="assets/layer/layer.js" type="text/javascript"></script>
	<script src="assets/js/vue.js"></script>
	<script src="assets/elementui/element.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/xlsx.full.min.js"></script>
	<script src="assets/js/config.js"></script>

</body>
<!-- END BODY -->
<script>
	jQuery(document).ready(function () {
		const { createApp } = Vue;
		const app = createApp({
			data() {
				return {
					info: {},
					tab: "info",
					link: {},
					links: [],
					select_link: 0,
					work: "",
					idx: 0,//链路index
					selectedLink: "",//被选中的链路名称
					activeIdx: 0,//正在导入导出的index,
					tabText: "",//节点类型名称
					linkName: "",//添加的链路名称
					nodeType: "",//节点类型
					boxLink: "",
					boxes: [],
					stations: []
				}
			},
			methods: {
				load() {
					layer.load(0, { msg: "努力加载中，请稍后..." });
					try {
						axios.post(config.getUrl() + "/getConfig", {}).then((res) => {
							return new Promise((resolve, reject) => {
								console.log(res);
								if (res.status == 200) {
									if (res.data.code == 0) {
										layer.closeAll()
										this.info = res.data.data
										resolve()
									} else {
										layer.closeAll();
										layer.alert("获取链路列表失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
										reject()
									}
								} else {
									layer.closeAll();
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
									reject()
								}
							})
						}, err => {
							console.log(aa);
						}).then(rs => {
							layer.load(0, { msg: "努力加载中，请稍后..." });
							axios.post(config.getUrl() + "/getLinks", {}).then(res => {
								if (res.status == 200) {
									console.log(res);
									if (res.data.code == 0) {
										layer.closeAll()
										if (res.data.data instanceof Array || res.data.data.lenght > 0) {
											var list = res.data.data
											this.links = [];
											for (var i = 0; i < list.length; i++) {
												let temp = list[i];
												temp.works = JSON.parse(list[i]['works']);
												this.links.push(temp);
											}
											this.link = this.links[this.select_link]
											this.selectedLink = this.links[this.idx]['linkName'];
											return { linkId: this.select_link['linkId'] }
										}
									} else {
										layer.closeAll();
										layer.alert("获取链路失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
										try {
											console.log(bbb);
										} catch (error) {

										}
									}
								} else {
									layer.closeAll();
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
									try {
										console.log(bbb);
									} catch (error) {

									}
								}
							})
						}).then(res => {
							console.log(res);
							layer.load(0, { msg: "努力加载中，请稍后..." });
							axios.post(config.getUrl() + "/getStations", {}).then(rs => {
								if (rs.status == 200) {
									console.log(rs);
									layer.closeAll();
									if (rs.data.code == 0) {
										var list = rs.data.data;
										if (list.length > 0) {
											this.stations = [];
											for (var i = 0; i < list.length; i++) {
												let tmp = list[i];
												tmp.works = tmp['works'].split(",");
												tmp.links = tmp['links'].split(",");
												tmp.workList = [];
												tmp.linkId = "";
												this.stations.push(tmp);
											}
										}
									} else {
										layer.msg(rs.data.msg, { time: 3000 })
									}
								} else {
									layer.msg("网络错误", { time: 3000 })
								}
							})
						})
					} catch (error) {
						console.log(error);
						layer.closeAll();
					}
				},
				//主要信息相关
				saveInfo() {
					try {
						if (this.info.company == "") {
							layer.alert("公司名称不能为空", { icon: 1, time: 3000 });
							return;
						}
						if (this.info.company == "") {
							layer.alert("公司简介不能为空", { icon: 1, time: 3000 });
							return;
						}
						if (!this.info.len instanceof Number || this.info.len < 0) {
							layer.alert("光缆总长度格式错误", { icon: 1, time: 3000 });
							return;
						}
						if (!this.info.watchLen instanceof Number || this.info.watchLen < 0) {
							layer.alert("己监控光缆总长度格式错误", { icon: 1, time: 3000 });
							return;
						}
						if (!this.info.locatorLen instanceof Number || this.info.locatorLen < 0) {
							layer.alert("己配备定位器总长度格式错误", { icon: 1, time: 3000 });
							return;
						}
						layer.load(0, { msg: "数据传输中，请稍后..." });
						axios.post(config.getUrl() + "/saveConfig", this.info).then(res => {
							if (res.status == 200) {
								layer.closeAll();
								layer.alert("保存数据成功", { icon: 1, time: 3000 });
							} else {
								layer.closeAll();
								layer.alert("网络连接失败", { icon: 1, time: 3000 });
							}
						})
					} catch (error) {
						console.log(error);
						layer.alert("未知错误，请联系管理员", { icon: 1, time: 3000 });
					}

				},
				//线路相关
				saveLink(idx, el) {
					try {
						if (this.link.linkName == "") {
							layer.alert("线路名称不能为空", { icon: 1, time: 3000 });
							return;
						}
						layer.load(0, { msg: "数据传输中，请稍后..." });
						console.log(this.link);
						axios.post(config.getUrl() + "/modifyLink", this.link).then(res => {
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									this.links.splice(this.select_link, 1, this.link)
									layer.alert("保存数据成功", { icon: 1, time: 3000 });
								} else {
									try {
										console.log(aaa);
									} catch (error) {

									}
									layer.alert("保存数据失败" + res.data.msg, { icon: 1, time: 3000 });
								}

							} else {
								try {
									console.log(aaa);
								} catch (error) {

								}
								layer.closeAll();
								layer.alert("网络连接失败", { icon: 1, time: 3000 });
							}
						}).then(res => {
							axios.post(config.getUrl() + "/updateJsonFile", {}).then(res => {
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										layer.alert("保存数据成功", { icon: 1, time: 3000 });
									} else {
										try {
											console.log(aaa);
										} catch (error) {

										}
										layer.alert("保存数据失败" + res.data.msg, { icon: 1, time: 3000 });
									}

								} else {
									try {
										console.log(aaa);
									} catch (error) {

									}
									layer.closeAll();
									layer.alert("网络连接失败", { icon: 1, time: 3000 });
								}
							})
						}).then(res => {
							axios.post(config.getUrl() + "/setShowName", { linkId: el.linkId, linkName: el.linkName }).then(res => {
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										layer.alert("保存数据成功", { icon: 1, time: 3000 });
									} else {
										try {
											console.log(aaa);
										} catch (error) {

										}
										layer.alert("保存数据失败" + res.data.msg, { icon: 1, time: 3000 });
									}

								} else {
									try {
										console.log(aaa);
									} catch (error) {

									}
									layer.closeAll();
									layer.alert("网络连接失败", { icon: 1, time: 3000 });
								}
							})
						})
					} catch (error) {
						console.log(error);
						layer.alert("未知错误，" + error, { icon: 1, time: 3000 })
					}
				},
				async createWork(idx,) {
					if (!(this.link.works instanceof Array)) {
						layer.alert("业务列表必须是数组", { icon: 1, time: 3000 });
						return;
					}
					if (!this.work || this.work == "") {
						layer.alert("业务名称格式错误", { icon: 1, time: 3000 });
						return;
					}
					this.link.works.push(this.work);
				},
				async eraseWork(wid) {
					this.link.works.splice(wid, 1);
				},
				changeLink(idx) {
					this.select_link = idx;
					this.link = this.links[idx]
					console.log(this.link);
				},
				createLink(e) {
					e.preventDefault();
					layer.load("数据传输中，请稍后...", { icon: 2 });
					if (!this.linkName) {
						layer.msg("链路名称不能为空", { icon: 1, time: 3000 });
						return;
					}
					axios.post(config.getUrl() + "/createLink", { linkName: this.linkName }).then(res => {
						console.log(res);
						if (res.status == 200) {
							if (res.data.code == 0) {
								layer.msg("创建链路成功", { icon: 1, time: 2000 });
								this.load()
							} else {
								layer.closeAll();
								layer.alert("创建链路失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
							}
						} else {
							layer.closeAll();
							layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
						}
					})
				}, eraseLink(e, lid, linkId, linkName) {
					if (linkId <= 0) {
						layer.msg("请选择要删除的链路", { icon: 1, time: 2000 });
						return;
					}
					var that = this;
					layer.confirm(`确定要删除"${this.links[lid]['linkName']}"这条链路吗？`, { btn: ['是', '否'] }, function () {
						axios.post(config.getUrl() + "/eraseLink", { linkId }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									layer.msg("删除成功", { icon: 1, time: 2000 });
									that.links.splice(lid, 1);
								} else {
									layer.msg("删除失败" + res.data.msg, { icon: 1, time: 2000 });
									try {
										console.log(error);
									} catch (error) {
										console.log(error);
									}
								}
							} else {
								layer.closeAll();
								layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								try {
									console.log(error);
								} catch (error) {

								}
							}
						}).then(res => {
							axios.post(config.getUrl() + "/jsonEraseNodeJs", { linkId: linkId }).then(rs => {
								console.log(rs);
								if (rs.status == 200) {
									if (rs.data.code == 0) {
										layer.msg("删除成功", { icon: 1, time: 2000 });
									} else {
										try {
											console.log(error);
										} catch (error) {

										}
										layer.msg("删除失败" + rs.data.msg, { icon: 1, time: 2000 });
									}
								} else {
									try {
										console.log(error);
									} catch (error) {

									}
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						}).then(res => {
							axios.post(config.getUrl() + "/lineEraseLink", { linkId: linkId, linkName }).then(rs => {
								console.log(rs);
								if (rs.status == 200) {
									if (rs.data.code == 0) {
										layer.msg("删除成功", { icon: 1, time: 2000 });
									} else {
										try {
											console.log(error);
										} catch (error) {

										}
										layer.msg("删除失败" + rs.data.msg, { icon: 1, time: 2000 });
									}
								} else {
									try {
										console.log(error);
									} catch (error) {

									}
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						})
					});

				},
				changeTab(e, lab) {
					e.preventDefault();
					this.tab = lab;
				},
				//接头盒相关
				async getBox(linkId) {
					try {
						layer.load("数据传输中......");
						axios.post(config.getUrl() + "/getBoxes", { linkId }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									this.boxes = res.data.data;
								} else {
									layer.msg("获取数据失败", { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						})
					} catch (error) {
						console.log(error);
						layer.msg("未知错误", { time: 3000 });
					}

				},
				//光缆相关				
				formatOptical(dt, linkName) {
					if (dt.length == 0) {
						return false;
					}
					var list = [];
					for (var k in dt) {
						let obj = {};
						obj.nodeCode = dt[k]['节点编号'];
						obj.nodeName = dt[k]['节点名称'];
						/* if(k == '节点类型'){
							let vl = dt[k];
							if(vl == '管井'){
								obj.nodeType = "SM_Well"
							}else if(vl == "杆塔"){
								obj.nodeType = "SM_Tower"
							}else if(vl == "机房" || vl == "变电站"){
								obj.nodeType = "SM_BDZ"
							}else{
								obj.nodeType = ""
							}
						} */
						let vl = dt[k]['节点类型'];
						if (vl == '管井') {
							obj.nodeType = "SM_Well"
						} else if (vl == "杆塔") {
							obj.nodeType = "SM_Tower"
						} else if (vl == "机房" || vl == "变电站") {
							obj.nodeType = "SM_BDZ"
						} else {
							obj.nodeType = ""
						}
						obj.longitude = dt[k]['经度'];
						obj.latitude = dt[k]['纬度'];
						obj.linkName = linkName;
						obj.R = dt[k]['R'];
						obj.G = dt[k]['G'];
						obj.B = dt[k]['B'];
						obj.Z = dt[k]['Z'];
						list.push(obj);
					}
					return list;
				},
				deFormatOptical(dt) {
					if (!(dt instanceof Array) || dt.length == 0) {
						return [];
					}
					var list = [];
					for (var k in dt) {
						let obj = {};
						obj['节点编号'] = dt[k]['nodeCode'];
						obj['节点名称'] = dt[k]['nodeName'];
						let vl = dt[k]['nodeType'];
						if (vl == "SM_Well") {
							obj['节点类型'] = "管井"
						} else if (vl == "SM_Tower") {
							obj['节点类型'] = "杆塔"
						} else if (vl == "SM_BDZ") {
							obj['节点类型'] = "变电站"
						} else {
							obj['节点类型'] = ""
						}
						obj['经度'] = dt[k]['longitude'];
						obj['纬度'] = dt[k]['latitude'];
						obj["R"] = dt[k]['R'];
						obj["G"] = dt[k]['G'];
						obj["B"] = dt[k]['B'];
						obj["Z"] = dt[k]['Z'];
						list.push(obj);
					}
					return list;
				},
				toImportCoordinate(e, lid, el) {
					this.activeIdx = lid;
					$("#coordinate").click();
				},
				toExportCoordinate(e, lid, el) {
					let linkName = this.links[lid]['linkName'];
					axios.post(config.getUrl() + "/getOpticals", { linkName }).then(res => {
						if (res.status == 200) {
							layer.closeAll();
							if (res.data.code == 0) {
								if (!(res.data.data instanceof Array) || res.data.data.length == 0) {
									layer.msg("没有查到符合条件的信息，无法导出", { icon: 1, time: 3000 });
									return;
								}
								this.list = this.deFormatOptical(res.data.data);
								console.log(this.list);
								var sheet = XLSX.utils.json_to_sheet(this.list); // data为需要导出的表格数据
								this.exportExcel(sheet, `${linkName}光缆节点信息.xlsx`);
							} else {
								layer.msg("获取数据失败," + res.data.msg, { icon: 1, time: 3000 });
							}
						} else {
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
						}
					})
				},
				toEraseCoordinate(e, lid, el) {
					let linkName = this.links[lid]['linkName'];
					var that = this;
					layer.confirm(`确定要删除${linkName}下的光缆信息吗？`, { btn: ['是', '否'] }, function () {
						axios.post(config.getUrl() + "/eraseOptical", { linkName }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									layer.msg("删除数据成功");
								} else {
									layer.msg("删除数据失败," + res.data.msg, { icon: 1, time: 3000 });
									try {
										console.log(error);
									} catch (error) {
										console.log(error);
									}
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								try {
									console.log(error);
								} catch (error) {

								}
							}
						}).then(res => {
							axios.post(config.getUrl() + "/jsonEraseNodeJs", { linkId: el.linkId }).then(rs => {
								console.log(rs);
								if (rs.status == 200) {
									if (rs.data.code == 0) {
										layer.msg("删除成功", { icon: 1, time: 2000 });
									} else {
										try {
											console.log(error);
										} catch (error) {

										}
										layer.msg("删除失败" + rs.data.msg, { icon: 1, time: 2000 });
									}
								} else {
									try {
										console.log(error);
									} catch (error) {

									}
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						}).then(res => {
							axios.post(config.getUrl() + "/lineEraseLink", { linkId: el.linkId, linkName: linkName }).then(rs => {
								console.log(rs);
								if (rs.status == 200) {
									if (rs.data.code == 0) {
										layer.msg("删除成功", { icon: 1, time: 2000 });
									} else {
										try {
											console.log(error);
										} catch (error) {

										}
										layer.msg("删除失败" + rs.data.msg, { icon: 1, time: 2000 });
									}
								} else {
									try {
										console.log(error);
									} catch (error) {

									}
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						})
					})
				},
				async readCoordinate(e) {
					console.log(e.target);
					try {
						if (e.target.value == "") {
							return;
						}
						console.log(e.target.files[0]);
						let file = e.target.files[0];
						var dt = await this.readExcel(file);
						document.getElementById("coordinate").value = "";
						let linkName = this.links[this.activeIdx]['linkName'];
						let linkId = this.links[this.activeIdx]['linkId']
						dt = this.formatOptical(dt, linkName);
						console.log(dt);
						if (dt.length == 0) {
							layer.msg("数据不能为空", { icon: 1, time: 2000 });
							return;
						}
						axios.post(config.getUrl() + "/importOpticals", { linkName, arr: dt }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									return res.data.data;
									layer.msg("导入数据成功", { icon: 1, time: 3000 });
								} else {
									try {
										console.log(aaa);
									} catch (error) {
										console.log(error);
									}
									layer.msg("导入数据失败" + res.data.msg, { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								try {
									console.log(aaa);
								} catch (error) {
									console.log(error);
								}
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						}).then(rds => {
							console.log("开始写入json");
							console.log(rds);
							axios.post(config.getUrl() + "/jsonImportOpticals", { linkId, linkName, arr: rds }).then(res => {
								if (res.status == 200) {
									console.log("res=>", res);
									layer.closeAll();
									if (res.data.code == 0) {
										layer.msg("创建JSON成功", { icon: 1, time: 3000 });
									} else {
										try {
											console.log(aaa);
										} catch (error) {

										}
										layer.msg("创建JSON失败" + res.data.msg, { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									try {
										console.log(aaa);
									} catch (error) {

									}
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						}).then(res => {
							console.log("开始写入Js_POI.json");
							axios.post(config.getUrl() + "/jsonCreateLine", { linkId, linkName, arr: dt }).then(res => {
								if (res.status == 200) {
									layer.closeAll();
									console.log("poi=>", res);
									if (res.data.code == 0) {
										layer.msg("创建JSON成功", { icon: 1, time: 3000 });
									} else {
										try {
											console.log(aaa);
										} catch (error) {

										}
										layer.msg("创建JSON失败" + res.data.msg, { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									try {
										console.log(aaa);
									} catch (error) {

									}
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("", { icon: 1, time: 3000 });
					}


				},
				//节点相关
				formatNode(dt, linkName) {
					if (dt.length == 0) {
						return false;
					}
					var list = [];
					for (var k in dt) {
						let obj = {};
						obj.nodeCode = dt[k]['编号'];
						obj.nodeType = dt[k]['类别'];
						obj.codeInfo = dt[k]['编码信息'];
						obj.wavelength = dt[k]['波长信息'];
						obj.distance = dt[k]['监测站的距离'];
						obj.joinTime = dt[k]['接入时间'];
						obj.nodeAttr = dt[k]['属性'];
						obj.station = dt[k]['监测站'];
						obj.stationPort = dt[k]['监测站端口'];
						obj.extendChannel = dt[k]['扩展盘通道'];
						obj.linkName = linkName;
						obj.nodeName = dt[k]['监测站名称'];
						obj.longitude = dt[k]['经度'];
						obj.latitude = dt[k]['纬度'];
						list.push(obj);
					}
					return list;
				},
				deFormatNode(dt) {
					if (!(dt instanceof Array) || dt.length == 0) {
						return [];
					}
					var list = [];
					for (var k in dt) {
						let obj = {};
						obj['编号'] = dt[k]['nodeCode'];
						obj['类别'] = dt[k]['nodeType'];
						obj['编码信息'] = dt[k]['codeInfo'];
						obj['波长信息'] = dt[k]['wavelength'];
						obj['监测站的距离'] = dt[k]['distance'];
						obj['接入时间'] = dt[k]['joinTime'];
						obj['属性'] = dt[k]['nodeAttr'];
						obj['监测站'] = dt[k]['station'];
						obj['监测站端口'] = dt[k]['stationPort'];
						obj['扩展盘通道'] = dt[k]['extendChannel'];
						obj['监测站名称'] = dt[k]['nodeName'];
						obj['经度'] = dt[k]['longitude'];
						obj['纬度'] = dt[k]['latitude'];
						list.push(obj);
					}
					return list;
				},
				toImportNodes(e, lid, el) {
					this.activeIdx = lid;
					$("#nodes").click();
				},
				toExportNodes(e, lid, el) {
					let linkName = this.links[lid]['linkName'];
					axios.post(config.getUrl() + "/getNodes", { linkName }).then(res => {
						if (res.status == 200) {
							layer.closeAll();
							if (res.data.code == 0) {
								if (!(res.data.data instanceof Array) || res.data.data.length == 0) {
									layer.msg("没有查到符合条件的信息，无法导出", { icon: 1, time: 3000 });
									return;
								}
								this.list = this.deFormatNode(res.data.data);
								console.log(this.list);
								var sheet = XLSX.utils.json_to_sheet(this.list); // data为需要导出的表格数据
								this.exportExcel(sheet, `${linkName}节点信息.xlsx`);
							} else {
								layer.msg("获取数据失败," + res.data.msg, { icon: 1, time: 3000 });
							}
						} else {
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
						}
					})
				},
				toEraseNodes(e, lid, el) {
					let linkName = this.links[lid]['linkName'];
					var that = this;
					layer.confirm(`确定要删除${linkName}下的节点信息吗？`, { btn: ['是', '否'] }, function () {
						axios.post(config.getUrl() + "/eraseNode", { linkName }).then(res => {
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									layer.msg("删除数据成功");
								} else {
									layer.msg("删除数据失败," + res.data.msg, { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						})
					})
				},
				async readNodes(e) {
					console.log(e.target);
					try {
						if (e.target.value == "") {
							return;
						}
						console.log(e.target.files[0]);
						let file = e.target.files[0];
						var dt = await this.readExcel(file);
						document.getElementById("nodes").value = "";
						let linkName = this.links[this.activeIdx]['linkName'];
						console.log('dt1=>', dt);
						dt = this.formatNode(dt, linkName);
						console.log(dt);
						if (dt.length == 0) {
							layer.msg("数据不能为空", { icon: 1, time: 2000 });
							return;
						}
						axios.post(config.getUrl() + "/importNodes", { linkName, arr: dt }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									layer.msg("导入数据成功", { icon: 1, time: 3000 });
								} else {
									layer.msg("导入数据失败，" + res.data.msg, { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("", { icon: 1, time: 3000 });
					}
				},
				async getNodes() {
					if (this.links.length == 0) return;
					if (this.idx >= this.links.length) {
						this.idx = this.links.length - 1;
					}
					try {
						var linkName = this.links[this.idx]['linkName'];
						this.selectedLink = linkName;
						console.log(this.selectedLink);
						if (!linkName) {
							layer.msg()
						}
						if (this.tabIdx > 0) {
							axios.post(config.getUrl() + "/getNodes", { linkName, nodeType: this.nodeType }).then(res => {
								console.log(res);
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										this.nodes = res.data.data;
										this.nodes = [];
										if (res.data.data instanceof Array && res.data.data.length > 0) {
											for (var k in res.data.data) {
												this.nodes.push(res.data.data[k]);
											}
										}
										console.log("node-" + this.nodeType + "=>", this.nodes);
									} else {
										layer.msg("", { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						} else if (this.tabIdx < 4) {
							axios.post(config.getUrl() + "/getOpticals", { linkName }).then(res => {
								console.log(res);
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										this.opticals = res.data.data;
									} else {
										layer.msg("获取数据失败", { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						} else {
							let linkId = this.links[this.idx]['linkId'];
							console.log(linkId);
							if (!linkId || linkId <= 0 || linkId == undefined) {
								layer.msg("获取线路ID错误", { time: 3000 });
								return;
							}
							axios.post(config.getUrl() + "/getBoxes", { linkId }).then(res => {
								console.log(res);
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										this.boxes = res.data.data;
									} else {
										layer.msg("获取数据失败", { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						}
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("未知错误，" + error, { icon: 1, time: 3000 });
					}
				},
				//接头盒相关
				formatBox(dt, linkId) {
					if (dt.length == 0) {
						return false;
					}
					var list = [];
					for (var k in dt) {
						let obj = {};
						obj.BoxID = dt[k]['接头盒编号'];
						obj.BoxName = dt[k]['接头盒名称'];
						obj.BoxCode = dt[k]['接头盒编码'];
						obj.Runtime = dt[k]['运行时间'];
						obj.Longitude = dt[k]['经度'];
						obj.Latitude = dt[k]['纬度'];
						obj['Z'] = dt[k]['Z'];
						obj.cdate = dt[k]['接入时间'];
						obj.linkId = linkId;
						list.push(obj);
					}

					console.log(list);
					return list;
				},
				deFormatBox(dt) {
					try {
						if (!(dt instanceof Array) || dt.length == 0) {
							return [];
						}
						console.log(dt);
						var list = [];
						for (var k in dt) {
							let obj = {};
							obj['接头盒编号'] = dt[k]['BoxID'];
							obj['接头盒名称'] = dt[k]['BoxName'];
							obj['接头盒编码'] = dt[k]['BoxCode'];
							obj['运行时间'] = dt[k]['Runtime'];
							obj['经度'] = dt[k]['Longitude'];
							obj['纬度'] = dt[k]['Latitude'];
							obj['Z'] = dt[k]['Z'];
							obj['接入时间'] = dt[k]['cdate'];
							list.push(obj);
						}
						return list;
					} catch (error) {
						console.log(error);
					}
				},
				toImportboxes(e, lid, el) {
					this.activeIdx = lid;
					$("#boxes").click();
				},
				toExportBoxes(e, lid, el) {
					let linkName = this.links[lid]['linkName'];
					let linkId = this.links[lid]['linkId'];
					axios.post(config.getUrl() + "/getBoxes", { linkId }).then(res => {
						if (res.status == 200) {
							console.log(res.data);
							layer.closeAll();
							if (res.data.code == 0) {
								if (!(res.data.data instanceof Array) || res.data.data.length == 0) {
									layer.msg("没有查到符合条件的信息，无法导出", { icon: 1, time: 3000 });
									return;
								}
								let list = this.deFormatBox(res.data.data);
								/* for(var i=0;i<list.length;i++){
									let tm = new Date(list[i]['接入时间']);
									list[i]['接入时间'] = `${tm.toLocaleDateString().replace(/\//g,"-")} ${tm.toTimeString().substr(0,8)}`
								} */
								console.log(list);
								var sheet = XLSX.utils.json_to_sheet(list); // data为需要导出的表格数据
								this.exportExcel(sheet, `${linkName}接头盒信息.xlsx`);
							} else {
								layer.msg("获取数据失败," + res.data.msg, { icon: 1, time: 3000 });
							}
						} else {
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
						}
					})
				},
				toEraseBoxes(e, lid, el) {
					let linkId = el.linkId;
					layer.load("数据传输中......");
					axios.post(config.getUrl() + "/eraseBox", { linkId }).then(res => {
						console.log(res);
						if (res.status == 200) {
							layer.closeAll();
							if (res.data.code == 0) {
								layer.msg("删除数据成功", { icon: 1, time: 3000 });
							} else {
								layer.msg("删除数据失败，" + res.data.msg, { icon: 1, time: 3000 });
							}
						} else {
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
						}
					}).then(res => {
						axios.post(config.getUrl() + "/jsonEraseBOX", { linkId }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									layer.msg("删除接头盒成功", { icon: 1, time: 3000 });
								} else {
									layer.msg("删除接头盒失败，" + res.data.msg, { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						})
					})
				},
				async readBoxes(e) {
					console.log(e.target);
					try {
						if (e.target.value == "") {
							return;
						}
						console.log(e.target.files[0]);
						let file = e.target.files[0];
						var dt = await this.readExcel(file);
						document.getElementById("boxes").value = "";
						let linkName = this.links[this.activeIdx]['linkName'];
						let linkId = this.links[this.activeIdx]['linkId'];
						dt = this.formatBox(dt, linkId);
						console.log(dt);
						if (dt.length == 0) {
							layer.msg("数据不能为空", { icon: 1, time: 2000 });
							return;
						}
						axios.post(config.getUrl() + "/importBoxes", { linkId, arr: dt }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									return res.data.data;
									layer.msg("导入数据成功", { icon: 1, time: 3000 });
								} else {
									layer.msg("导入数据失败，" + res.data.msg, { icon: 1, time: 3000 });
									try {
										console.log(aaa)
									} catch (error) {
										
									}
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								try {
									console.log(aaa);
								} catch (error) {
									
								}
							}
						}).then(res1 => {
							console.log(res1);
							axios.post(config.getUrl() + "/jsonCreateBOX", { linkId, arr: res1 }).then(res => {
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										layer.msg("导入数据成功", { icon: 1, time: 3000 });
									} else {
										layer.msg("导入数据失败，" + res.data.msg, { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("", { icon: 1, time: 3000 });
					}
				},
				//读取接头盒
				async getBoxes() {
					try {
						let linkId = this.links[this.idx]['linkId'];
						console.log(linkId);
						if (!linkId || linkId <= 0 || linkId == undefined) {
							layer.msg("获取线路ID错误", { time: 3000 });
							return;
						}
						axios.post(config.getUrl() + "/getBoxes", { linkId }).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									this.boxes = res.data.data;
								} else {
									layer.msg("获取数据失败", { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("未知错误，" + error, { icon: 1, time: 3000 });
					}
				},
				//变电站相关
				formatBDZ(dt, linkId) {
					if (dt.length == 0) {
						return false;
					}
					var list = [];
					for (var k in dt) {
						let obj = {};
						obj.stationName = dt[k]['变电站名称'];
						obj.voltage = dt[k]['电压'];
						obj.links = dt[k]['涉及线路'].split(",");
						obj.works = dt[k]['涉及业务'].split(",");
						obj.longitude = dt[k]['经度'];
						obj.latitude = dt[k]['纬度'];
						obj.R = dt[k]['R'];
						obj.G = dt[k]['G'];
						obj.B = dt[k]['B'];
						obj.Z = dt[k]['Z']
						obj.imageUrl = dt[k]['图片路径'];
						list.push(obj);
					}
					return list;
				},
				deFormatBDZ(dt) {
					try {
						if (!(dt instanceof Array) || dt.length == 0) {
							return [];
						}
						var list = [];
						for (var k in dt) {
							let obj = {};
							obj['变电站名称'] = dt[k]['stationName'];
							obj['电压'] = dt[k]['voltage'];
							obj['涉及线路'] = dt[k]['links'].join(",");
							obj['涉及业务'] = dt[k]['works'].join(",");
							obj['经度'] = dt[k]['longitude'];
							obj['纬度'] = dt[k]['latitude'];
							obj['R'] = dt[k]["R"];
							obj['G'] = dt[k]["G"];
							obj['B'] = dt[k]["B"];
							obj['Z'] = dt[k]["Z"];
							obj['图片路径'] = dt[k]["imageUrl"];
							list.push(obj);
						}
						return list;
					} catch (error) {
						console.log(error);
					}
				},
				async toImportBDZ(e, lid, el) {
					this.activeIdx = lid;
					$("#bdz").click();
				},
				async readBDZ(e) {
					console.log(e.target);
					try {
						if (e.target.value == "") {
							return;
						}
						console.log(e.target.files[0]);
						let file = e.target.files[0];
						var dt = await this.readExcel(file);
						document.getElementById("bdz").value = "";
						dt = this.formatBDZ(dt);
						console.log(dt);
						if (dt.length == 0) {
							layer.msg("数据不能为空", { icon: 1, time: 2000 });
							return;
						}
						axios.post(config.getUrl() + "/importBdz", { arr: dt }).then(res => {
							console.log(res);
							return new Promise((resolve,reject) => {
								try {
									if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									resolve(res.data.data);
									layer.msg("导入数据成功", { icon: 1, time: 3000 });
								} else {
									reject(false)
									layer.msg("导入数据失败，" + res.data.msg, { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								reject(false);
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								
							}
								} catch (error) {
									console.log(error);
									reject(false)
								}
							})
						}).then(res1 => {
							console.log(res1);
							axios.post(config.getUrl() + "/jsonCreateBDZ", { arr: res1 }).then(res => {
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										layer.msg("导入数据成功", { icon: 1, time: 3000 });
									} else {
										layer.msg("导入数据失败，" + res.data.msg, { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("", { icon: 1, time: 3000 });
					}
				},
				//读取变电站
				async getStations() {
					try {
						layer.load("数据传输中，请稍后......")
						axios.post(config.getUrl() + "/getStations", {}).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									let list = res.data.data;
									if (list.length > 0) {
										for (var i = 0; i < list.length; i++) {
											let tmp = list[i];
											tmp.linkInput = "";
											tmp.workInput = "";
											tmp.links = tmp.links.split(",")
											tmp.works = tmp.works.split(",");
											if (i == 0) {
												tmp.class = "in"
											} else {
												tmp.class = ""
											}
											this.stations.push(tmp);
										}
									} else {
										this.stations = [];
									}
								} else {
									layer.msg("获取数据失败", { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("未知错误，" + error, { icon: 1, time: 3000 });
					}
				},
				//新增变电站
				incrementStation(e) {
					e.preventDefault();
					this.stations.unshift({
						stationId: 0,
						stationName: "",
						voltage: "",
						links: [],
						works: [],
						workList: [],
						linkId: "",
						longitude: "",
						latitude: "",
						linkInput: "",
						workInput: "",
						Z: "",
						R: "",
						G: "",
						B: "",
						imageUrl: "",
						class: "in"
					});
					console.log(this.stations);
				},
				//保存变电站
				saveStation(sid, el) {
					try {
						layer.load("数据传输中，请稍后......")
						console.log(el);
						axios.post(config.getUrl() + "/saveStation", el).then(res => {
							console.log(res);
							if (res.status == 200) {
								layer.closeAll();
								if (res.data.code == 0) {
									let obj = res.data.data;
									this.stations[sid]['stationId'] = obj['stationId']
									return true;
								} else {
									try {
										console.log(aaa);
									} catch (error) {
										console.log(error);
									}
									layer.msg("获取数据失败", { icon: 1, time: 3000 });
								}
							} else {
								layer.closeAll();
								try {
									console.log(aaa);
								} catch (error) {
									console.log(error);
								}
								layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
							}
						}).then(rs => {
							axios.post(config.getUrl() + "/saveBDZ", el).then(res => {
								console.log(res);
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										let obj = res.data.data;
									} else {
										layer.msg(res.data.msg, { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						})
					} catch (error) {
						layer.closeAll();
						console.log(error);
						layer.msg("未知错误，" + error, { icon: 1, time: 3000 });
					}
				},
				toEraseBDZ() {
					var that = this;
					layer.confirm(`确定要删除所有变电站信息吗？`, { btn: ['是', '否'] }, function () {
						try {
							layer.load("数据传输中，请稍后......")
							axios.post(config.getUrl() + "/eraseAllStation",{}).then(res => {
								console.log(res);
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
										this.stations = [];
										return true;
									} else {
										try {
											console.log(aaa);
										} catch (error) {
											console.log(error);
										}
										layer.msg("获取数据失败", { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									try {
										console.log(aaa);
									} catch (error) {
										console.log(error);
									}
									layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
								}
							}).then(rs => {
								axios.post(config.getUrl() + "/jsonEraseAllStation", {}).then(res => {
									console.log(res);
									if (res.status == 200) {
										layer.closeAll();
										if (res.data.code == 0) {
										} else {
											layer.msg(res.data.msg, { icon: 1, time: 3000 });
										}
									} else {
										layer.closeAll();
										layer.msg("网络通讯错误，请联系管理员", { icon: 1, time: 3000 });
									}
								})
							})
						} catch (error) {
							layer.closeAll();
							console.log(error);
							layer.msg("未知错误，" + error, { icon: 1, time: 3000 });
						}
					});
				},
				insertLink(id) {
					this.stations[id]['links'].push(this.stations[id]['linkInput']);
				},
				insertWork(id) {
					this.stations[id]['works'].push(this.stations[id]['workInput']);
				},
				eraseLinks(sid, lid) {
					this.stations[sid]['links'].splice(lid, 1)
				},
				eraseWorks(sid, wid) {
					this.stations[sid]['works'].splice(wid, 1)
				},
				//读取EXCEL文件
				async readExcel(file) {
					return new Promise((resolve, reject) => {
						setTimeout(() => {
							resolve(false);
						}, 30000);
						var fileReader = new FileReader();
						fileReader.onload = function (ev) {
							console.log("aaa");
							try {
								var data = ev.target.result;
								var workbook = XLSX.read(data, {
									type: "binary",
								}); //以二进制流的方式得到整份excal表格对象
								var persons = []; //存储获取到的数据
							} catch (error) {
								console.log("文件类型不正确，只能读取.xlsx文件");
							}
							// 表格的表格范围，可用于判断表头是否数量是否正确
							var fromTo = "";
							// 遍历每张表读取
							for (var sheet in workbook.Sheets) {
								if (workbook.Sheets.hasOwnProperty(sheet)) {
									fromTo = workbook.Sheets[sheet]["!ref"];
									console.log(fromTo);
									persons = persons.concat(
										XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { head: 0, defval: " " })
									);
									//break; // 如果只取第一张表，就取消注释这行
								}
							}
							//在控制台打印出来表格中的数据
							resolve(persons);
						};
						fileReader.readAsBinaryString(file);
					});
				},
				/**
				 * 通用的打开下载对话框方法，没有测试过具体兼容性
				 * @param url 下载地址，也可以是一个blob对象，必选
				 * @param saveName 保存文件名，可选
				 */
				openDownloadDialog(url, saveName) {
					if (typeof url == "object" && url instanceof Blob) {
						url = URL.createObjectURL(url); // 创建blob地址
					}
					var aLink = document.createElement("a");
					aLink.href = url;
					aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
					var event;
					if (window.MouseEvent) event = new MouseEvent("click");
					else {
						event = document.createEvent("MouseEvents");
						event.initMouseEvent(
							"click",
							true,
							false,
							window,
							0,
							0,
							0,
							0,
							0,
							false,
							false,
							false,
							false,
							0,
							null
						);
					}
					aLink.dispatchEvent(event);
				},
				sheet2blob(sheet, sheetName) {
					sheetName = sheetName || "sheet1";
					var workbook = {
						SheetNames: [sheetName],
						Sheets: {},
					};
					workbook.Sheets[sheetName] = sheet;
					// 生成excel的配置项
					var wopts = {
						bookType: "xlsx", // 要生成的文件类型
						bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
						type: "binary",
					};
					var wbout = XLSX.write(workbook, wopts);
					var blob = new Blob([s2ab(wbout)], {
						type: "application/octet-stream",
					});
					// 字符串转ArrayBuffer
					function s2ab(s) {
						var buf = new ArrayBuffer(s.length);
						var view = new Uint8Array(buf);
						for (var i = 0; i != s.length; ++i)
							view[i] = s.charCodeAt(i) & 0xff;
						return buf;
					}
					return blob;
				},
				exportExcel(sheet, fileName) {
					var blob = this.sheet2blob(sheet);
					this.openDownloadDialog(blob, fileName);
				}
			},
			created() {
				this.select_link = 0;
				this.load()


			},
			watch: {
				boxLink: {
					handler(newVal, oldVal) {
						if (newVal > 0) {
							console.log(this.boxLink);
							this.getBox(this.boxLink)
						}
					}
				}
			}
		})
		app.mount("#app");
	});	
</script>

</html>